<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flink环境测试</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
    <div id="app">
        <h2>Flink环境测试</h2>
        
        <el-form label-width="100px">
            <el-form-item label="Flink环境">
                <el-select
                    v-model="selectedEnv"
                    placeholder="选择Flink环境"
                    clearable
                    filterable
                    style="width: 100%"
                >
                    <el-option
                        v-for="env in environmentOptions"
                        :key="env.value"
                        :label="`${env.label} (${env.host}:${env.port})`"
                        :value="env.value"
                    >
                        <div class="env-option">
                            <div class="env-name">{{ env.label }}</div>
                            <div class="env-url">{{ env.host }}:{{ env.port }}</div>
                        </div>
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        
        <div style="margin-top: 20px;">
            <h3>调试信息:</h3>
            <p>环境选项数量: {{ environmentOptions.length }}</p>
            <div v-if="environmentOptions.length > 0">
                <div v-for="(env, index) in environmentOptions" :key="index" style="margin: 10px 0; padding: 10px; border: 1px solid #ccc;">
                    <strong>{{ index + 1 }}. {{ env.label }}</strong><br>
                    <span>Host: {{ env.host }}</span><br>
                    <span>Port: {{ env.port }}</span><br>
                    <span>Value: {{ env.value }}</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        
        createApp({
            setup() {
                const selectedEnv = ref('');
                const environmentOptions = ref([]);
                
                const fetchEnvironments = async () => {
                    try {
                        console.log('开始获取环境配置...');
                        const response = await fetch('/api/settings?service_type=flink');
                        const data = await response.json();
                        console.log('API响应:', data);
                        
                        if (data.configs && data.configs.flink) {
                            const environments = [];
                            for (const [configName, config] of Object.entries(data.configs.flink)) {
                                console.log(`处理环境: ${configName}`, config);
                                
                                const protocol = config.protocol || 'http';
                                const host = config.host || '';
                                const port = config.port;
                                const path = config.path || '';
                                
                                const portStr = port ? `:${port}` : '';
                                const fullUrl = `${protocol}://${host}${portStr}${path}`;
                                
                                const environment = {
                                    label: configName,
                                    value: fullUrl,
                                    host: host,
                                    port: port,
                                    protocol: protocol
                                };
                                
                                console.log('构建的环境对象:', environment);
                                environments.push(environment);
                            }
                            
                            environments.sort((a, b) => (a.port || 0) - (b.port || 0));
                            console.log('最终环境列表:', environments);
                            environmentOptions.value = environments;
                        }
                    } catch (error) {
                        console.error('获取环境配置失败:', error);
                    }
                };
                
                onMounted(() => {
                    fetchEnvironments();
                });
                
                return {
                    selectedEnv,
                    environmentOptions
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
    
    <style>
        .env-option {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .env-name {
            font-weight: 500;
            color: #303133;
        }
        .env-url {
            font-size: 12px;
            color: #909399;
        }
    </style>
</body>
</html>
